<template>
  <view class="unlockRL_container app_container_page">
    <view class="title" v-if="list.length > 0"> 选择已开通此功能的报告进行对比 </view>
    <appReportItem v-for="item of list" :item="item" :key="item.reportId" @REPORT_ITEM_CLICK="handleItemClick" />
    <view class="add_report" @click="handleAddClick">
      <van-icon name="plus" />
      <view>添加报告</view>
    </view>
  </view>
</template>

<script>
import { getReportList } from '@/api/report'
import { appReportItem } from '@/components/app/app_report_item'
export default {
  name: 'unlockReportList',
  components: {
    appReportItem
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    compareReportId() {
      return this.$store.state.compareReportId
    }
  },
  methods: {
    async fetchList() {
      try {
        const res = await getReportList({
          pageNum: 1,
          pageSize: 10000,
          isLock: '1',
          studentId: '0'
        })
        this.list = res.data.list
      } catch (error) {
        console.log(error)
      }
    },
    handleItemClick(item) {
      // console.log(item, this.compareReportId)
      if (item.reportId === this.compareReportId) {
        uni.showToast({
          icon: 'none',
          title: '同一份报告无法对比'
        })
        return
      }

      uni.navigateTo({
        url: `/pagesSub/compare/detail?reportId=${item.reportId}`
      })
    },
    handleAddClick() {
      uni.navigateTo({
        url: '/pages/children/list'
      })
    }
  },
  onLoad(option) {
    //
    // this.fetchList()
  },
  onShow() {
    this.fetchList()
  }
}
</script>

<style lang="scss">
.unlockRL_container {
  padding: 30rpx;
  background-image: url('#{$BASEURL}/bg-no-wave.png');
  background-size: contain;

  .title {
    color: #fff;
    font-size: 40rpx;
    padding-bottom: 30rpx;
  }
  app-report-item ~ .add_report {
    margin-top: 30rpx;
  }
  .add_report {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx;
    height: 400rpx;

    border-radius: 40rpx;
    @include boxWithDashed(40rpx, #f5af64, 10rpx);
    @include bgStriped($bgColor: #ffff43, $lineColor: #ecec43);

    text-align: center;
    .van-icon {
      font-size: 100rpx;
      color: #1973f4;
      font-weight: bold;
    }
    view {
      font-size: 40rpx;
      margin-top: 30rpx;
    }
  }
}
</style>
